<template>
  <div class="toolbar">
    <div
      v-for="tool in tools"
      :key="tool.type"
      class="tool-item"
      draggable="true"
      @dragstart="(e) => handleDragStart(tool.type, e)"
    >
      {{ tool.label }}
    </div>
  </div>
</template>

<script setup lang="ts">
const tools = [
  { type: 'input', label: '输入' },
  { type: 'process', label: '处理' },
  { type: 'output', label: '输出' },
];

const handleDragStart = (type: string, event: DragEvent) => {
  event.dataTransfer?.setData('nodeType', type);
};

defineOptions({
  name: 'Toolbar'
});
</script>

<style scoped>
.toolbar {
  padding: 10px;
  border-right: 1px solid #eee;
}

.tool-item {
  padding: 8px;
  margin: 4px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: move;
  user-select: none;
}

.tool-item:hover {
  background: #f5f5f5;
}
</style> 